import React from "react";
import Layout from "../Layout/Layout";
import {Card, Toast, WhiteSpace} from "antd-mobile";
import "./index.css";
import * as QrCode from "qrcode.react";

class OrderDetail extends React.Component {
    // eslint-disable-next-line react/no-deprecated
    async componentWillMount() {
        if (this.props.location.query) { await this.props.getReserverOrderDetail(this.props.location.query.id); }
    }

    render() {
        if (!this.props.location.query) {
            Toast.fail("请重新加载页面！");
            this.props.history.push("/order-list");
            return "";
        }
        return (
            <Layout {...this.props}>
                <div>
                    <WhiteSpace size = "lg"/>
                    <Card>
                        <Card.Header title = "订单信息"/>
                        <Card.Body>
                            <div className={"order-detail-div"}>
                                <div>订单号：{this.props.orderDetail.id}</div>
                                <div>预约单状态：{this.props.orderDetail.status ? "已预约" : "已取消"}</div>
                                <div>车牌：{this.props.orderDetail.carNumber}</div>
                                <div>邮箱：{this.props.orderDetail.email}</div>
                                <div>创建时间：{this.props.orderDetail.createTime}</div>
                                <div>开始时间：{this.props.orderDetail.reserveParkingTime}</div>
                                <div>结束时间：{this.props.orderDetail.reserveFetchingTime}</div>
                                <div>停车场位置：{this.props.orderDetail.address}</div>
                                <div>车位编号：{this.props.orderDetail.parkingSpaceCode}</div>
                            </div>
                            <div style={{textAlign: "center", marginTop: "1.5rem"}}>
                                <div style={{margin: "0.8rem"}}>进场码</div>
                                <QrCode value={this.props.location.query.id} size={200} />
                            </div>
                        </Card.Body>
                    </Card>
                </div>
            </Layout>
        );
    }
}
export default OrderDetail;